<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计记账金额</title>
    <link th:replace="template/sys_header :: header"/>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">开始日期</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" autocomplete="off" placeholder="开始日期" name="startTime"
                                           id="startTime">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">截止日期</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" autocomplete="off" placeholder="截止日期" name="endTime"
                                           id="endTime">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body padding20">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th style="text-align: center;">收入</th>
                            <th style="text-align: center;">支出</th>
                            <th style="text-align: center;">结余</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td align="center" id="shouru">0</td>
                            <td align="center" id="zhichu">0</td>
                            <td align="center" id="jieyu">0</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:replace="template/sys_header :: footer"></script>
<script type="text/javascript" th:inline="javascript">
    var table = layui.table, $ = layui.jquery, form = layui.form, laydate = layui.laydate;
    $(function () {
        //执行一个laydate实例
        laydate.render({
            elem: '#startTime' //指定元素
        });

        laydate.render({
            elem: '#endTime' //指定元素
        });

        // 获取当前月的第一天
        var dt = new Date();
        dt.setDate(1);
        var st = dt.Format("yyyy-MM-dd");
        $("#startTime").val(st);
        var et = new Date().Format("yyyy-MM-dd");
        $("#endTime").val(et);

        loadData();

        //监听查询按钮
        form.on('submit(search)', function (data) {
            loadData();
            return false;
        });
    })

    function loadData() {
        var startTime = getById("startTime").value;
        var endTime = getById("endTime").value;
        if (startTime == "") {
            layer.alert("请选择开始时间", {icon: 2})
            return false;
        }
        if (endTime == "") {
            layer.alert("请选择截止时间", {icon: 2})
            return false;
        }
        new AjaxRequest({
            type: "POST",
            url: webroot + "bus/cashbook/getTimeSlotAmount?startTime=" + startTime + "&endTime=" + endTime,
            //data : JSON.stringify({startTime : startTime ,endTime : endTime }) ,
            isShowLoader: true,
            success: function (res) {
                if (res.resultCode == "0000" && res.resultObj) {
                    $("#shouru").text(res.resultObj.shouru);
                    $("#zhichu").text(res.resultObj.zhichu);
                    var jieyu = (res.resultObj.shouru - res.resultObj.zhichu).toFixed(2);
                    $("#jieyu").text(jieyu);
                } else {
                    layer.alert(res.resultMessage, {icon: 2})
                }
            }
        });
    }

</script>
</body>
</html>